<template>
	<view class="matchmain animated fadeIn faster" @touchmove.prevent>
		<view class="position-fixed z-index-100" v-if="loading" style="width: 750rpx;height: 100vh;background-color: #000000;">
			<image src="/static/actbg.gif" mode="widthFix" style="width: 750rpx;"></image>
		</view>
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">{{ loading? count + '人正在匹配' : '选择搭子' }}</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-center d-flex-middle mb-4 mt-6" v-if="origonList.length">
			<text class="colorman mr-1 font30">{{origonList.length}}</text>
			<text class="colorfff font24">位搭子正在等你选择</text>
		</view>
		<view v-if="!loading">
			<view v-if="origonList.lenght!==0">
				<view class="d-flex d-flex-center position-absolute z-index-100"
					  style="width: 750rpx; left: 50%;"
					  v-if="origonList.length"
					  :style="{transform: 'translateX('+DistanceX+'rpx)'}">
					<view  class="position-relative">
						<image  :src="origonList[preCardIdx].avatar"
								class="rounded mt-3 mx-2"
								style="width: 130rpx; height: 130rpx; border: 1px solid #fff; width: 130rpx; height: 130rpx;"
								@click="changeCard(preCardIdx)"
						></image>
					</view>
					<view  class="position-relative currentBox animated" style="width: 267rpx; height: 267rpx;">
						<image  :src="origonList[currentDazi].avatar" 
								class="rounded mt-3 currentDazi"
								style="width: 250rpx; height: 250rpx;"
						></image>
					</view>
					<view  class="position-relative">
						<image  :src="origonList[nextCardIdx].avatar"
								class="rounded mt-3 mx-2"
								style="border: 1px solid #fff; width: 130rpx; height: 130rpx;"
								@click="changeCard(nextCardIdx)"
						></image>
					</view>
				</view>
				<view class="cards-wrapper" v-if="origonList.lenght!==0">
					<swiper class="swiper" 
						circular
						:current="currentDazi" 
						@animationfinish="onAnimationfinish" 
						:duration="450" 
						style="height: 1100rpx;"
					>
						<swiper-item v-for="(item, index) in origonList" :key="item.id" class="position-relative">
							<view class="bg-fff rounded50 pb-5 card-container" style="margin: 230rpx auto;">
								<view class="d-flex d-flex-center d-flex-middle mt-5">
									<view class="font36 font-bold mr-2">{{item.nickname}}</view>
									<template>
										<image v-if="item.gender === 1" 
											   src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png" 
											   style="width: 30rpx; height: 30rpx;">
										</image>
										<image v-else 
											   src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" 
											   style="width: 30rpx; height: 30rpx; margin-bottom: 1px;">
										</image>
									</template>
								</view>
								
								<view class="d-flex-column d-flex-middle d-flex-center mt-3">
									<view class="font36 text-center" style="color: #3E3A39;">{{item.remark}}</view>
									
									<view class="font26 mt-3" v-if="item.onlineTime" style="color: #9D9D9E;">在线时间：{{ item.onlineTime }}</view>
									
									<view class="d-flex-column d-flex-middle mt-4" v-if="item.personalityType">
										<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" 
											   style="width: 130rpx; height: 130rpx;">
										</image>
										<text class="font24">{{item.personalityType}}</text>
									</view>
									
									<view class="d-flex tag-container">
										<view class="d-flex mr-2">
											<view class="tag-icon" style="background: #F6B42C;">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png" 
													   style="width: 40rpx; height: 32rpx;">
												</image>
											</view>
											<view class="tag-text" style="background: #fceacc; color: #FF9645;">{{ item.gameName }}</view>
										</view>
										
										<view class="d-flex">
											<view class="tag-icon" style="background: #B73DE3;">
												<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" 
													   style="width: 35rpx; height: 28rpx;">
												</image>
											</view>
											<view class="tag-text" style="background: #eed2f9; color: #B73DE3;">{{ item.makeFriends }}</view>
										</view>
									</view>
									
									
								</view>
							</view>
							<view class="select-btn position-absolute" @click="gotoChat(item)">就选他了</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view v-if="origonList.length == 0" class="d-flex d-flex-column d-flex-middle position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/empty.png" style="width: 300rpx; height: 300rpx;"></image>
				<view class="colorfff font24 mt-2 mr-2">en? 现在好像没人哦~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	import { DaziApi } from "../../http/Dazi";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				count: null,
				currentDazi: 0,
				gameId: null,
				currentDaziList: [],
				origonList: [],
				DaziParams: {},
				DistanceX: -375,
				loading: true,
				timer: null
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		onLoad(opt) {
			this.gameId = opt.gameId
			this.count = Math.floor(Math.random() * 51) + 50;
			this.DaziParams = JSON.parse(opt.params)
			this.Match()
			this.timer = setInterval(() => {
			    this.updateCount()
			}, 1000)
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			changeCard(cardId) {
				this.currentDazi = cardId
			},
			onAnimationfinish(e) {
				this.changeCard(e.detail.current)
			},
			updateCount() {
				let n = Math.floor(Math.random() * 2) + 1;
				this.count += n
			},
			async Match() {
				try {
					const param = {
						gameId: this.gameId
					}
					this.DaziParams.forEach(i => {
						if(i.typeName === '在线时间') {
							if(!param.onlineTimeId) {
								param.onlineTimeId = i.id
							} else {
								param.onlineTimeId = `${param.onlineTimeId},${i.id}`;
							}
						}
						if(i.typeName === '段位名称') {
							param.gameLevelId = i.id
						}
						if(i.typeName === '区服类型') {
							if(!param.districtServerId) {
								param.districtServerId = i.id
							} else {
								param.districtServerId = `${param.districtServerId},${i.id}`;
							}
						}
						if(i.typeName === '交友目的') {
							if(!param.makeFriendsId) {
								param.makeFriendsId = i.id
							} else {
								param.makeFriendsId = `${param.makeFriendsId},${i.id}`;
							}
						}
						if(i.typeName === '性别') {
							param.gender = i.name === '男'? 1 : 2
						}
						if(i.typeName === '性格') {
							param.TypePrefix = i.name === 'I人'? 'I' : 'E'
						}
						if(i.typeName === '同城') {
							param.sameCityFlag = i.name === '同城'? 1 : 0
						}
					})
					let res = await DaziApi.Match(param);
					console.log(res);
					this.origonList = res
					this.currentDaziList = this.origonList[0]
					this.loading = false
					clearInterval(this.timer)
				} catch {
					this.loading = false
					clearInterval(this.timer)
				}
			},
			checkRealNaem(){//判断是否实名
				// if(this.$store.state.user.realName==''||this.$store.state.user.realName==null) {
				// 	return false					
				// } else {	
				// 	return true
				// }
				return true
			},
			async addRecord() {
				let params = {
					coupleId: this.origonList[this.currentDazi].id,
					matchType: 3
				}
				let res = await DaziApi.addRecord(params);
			},
			gotoChat(item) {
				if(this.checkRealNaem()){
					this.addRecord();
					const data = {
						uid: item.id,
						userUid: item.uid,
						name: item.nickname,
						avatar: item.avatar,
						conversationID: 'C2C'+item.uid,
						type: 'C2C'
					}
					uni.navigateTo({
						url:'/message/im/im?to='+encodeURIComponent(JSON.stringify(data))
					})
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {  
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});			
				}
			}
		},
		computed: {
			preCardIdx() {
				if(this.currentDazi == 0) {
					return this.origonList.length - 1
				} else {
					return this.currentDazi - 1
				}
			},
			nextCardIdx() {
				if(this.currentDazi == this.origonList.length - 1) {
					return 0
				}
				return this.currentDazi + 1
			}
		},
		onUnload() {
		    clearInterval(this.timer)
		}
	}
</script>

<style scoped>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	touch-action: none;
}
.metting-box {
	width: 98%;
	height: 940rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	overflow: hidden;
}
.linerbg-b {
	background: linear-gradient( 180deg, #61D1E5 0%, rgba(106,211,230,0.94) 10%, rgba(131,219,234,0.78) 29%, rgba(172,230,241,0.52) 54%, rgba(227,247,250,0.17) 86%, rgba(255,255,255,0) 100%);
}
.colorman{
	color:#5db0fe
}
.currentBox {
	background: #f00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to top, #fab452, #9d41d3);
	transition: all 0.3s ease;
}
.currentDazi {
	border: 1px solid #fff;
	margin-top: 0;
	border: 0;
	border-radius: 100%;
	transition: all 0.3s ease;
}
.voice {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	margin: 45rpx auto 0;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203416.png);
	background-size: contain;
}
.currentCart {
	transform: scale(1);
	transition: all 0.3s ease;
}
.card-container {
	width: 620rpx;
	height: 800rpx;
	background: #fff;
	border-radius: 40rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-header {
	padding: 20rpx;
}
.tag-container {
	margin-top: 20rpx;
}
.tag-icon {
	padding: 4rpx 12rpx;
	border-radius: 10rpx 0 0 10rpx;
	display: flex;
	align-items: center;
}
.tag-text {
	padding: 6rpx 16rpx;
	border-radius: 0 10rpx 10rpx 0;
	font-size: 24rpx;
}
.select-btn {
	width: 70%;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(to right, #ff9645, #b73de3);
	color: #fff;
	border-radius: 40rpx;
	text-align: center;
	font-size: 32rpx;
	bottom: 60rpx;
	left: 50%;
	transform: translateX(-50%);

}
.card-item {
	transition: all 0.3s ease;
}
.current-card {
	transform: scale(1);
	opacity: 1;
}
.prev-card, .next-card {
	transform: scale(0.9);
	opacity: 0.6;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 禁用swiper的触摸效果 */
.swiper {
	touch-action: none;
}
.cards-wrapper {
	position: relative;
	overflow: hidden;
	touch-action: none;
}
</style>
